<script setup>
import DetailHot from './components/DetailHot.vue'
import { getDetail } from '@/apis/detail'
import { onMounted, ref , h } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElNotification } from 'element-plus'
import { useCartStore } from '@/stores/cartStore'

const cartStore = useCartStore()
const goods = ref({})
const route = useRoute()
var num = ref(1)
const addCart1 = () => {
  // ElNotification({
  //   title: 'Success',
  //   message: 'This is a success message',
  //   type: 'success',
  // })
  ElMessage({ type: 'success', message: '已加入购物车' })
  var retrievedArrayString = localStorage.getItem('char');
  var retrievedArray = retrievedArrayString ? JSON.parse(retrievedArrayString) : [];
  var i = 0
  if (retrievedArray) {
    retrievedArray.forEach((item, index) => {
      console.log(item.prodcutId)
      if (item.productId == route.params.id) {
        item.count += num.value
        i = 1
      }
    })
  }
  if (i == 0) {
    retrievedArray.push({
      "productId": route.params.id,
      "productName": goods.value.productName,
      "image": goods.value.image,
      "count": num.value,
      "price": goods.value.price,
      "des": goods.value.des
    })
  }
  localStorage.setItem('char', JSON.stringify(retrievedArray));
  num.value = 0
  // const h = this.$createElement;

  // this.$notify({
  //   title: '购物商城',
  //   message: h('i', {
  //     style: 'color: teal'
  //   }, this.goodsData.productName + '商品已加入购物车')
  // });
}
const handleChange = (value) => {
  console.log(value)
}
const getGoods = async () => {
  const res = await getDetail(route.params.id)
  goods.value = res.data
  console.log(res.data)
}

onMounted(() => getGoods())
onMounted(() => {
  // 1. 获取三个盒子
  // 2. 小盒子 图片切换效果
  const small = document.querySelector('.small')
  //  中盒子
  const middle = document.querySelector('.middle')
  //  大盒子
  const large = document.querySelector('.large')
  console.log(111)
  // 2. 事件委托
  small.addEventListener('mouseover', function (e) {
    if (e.target.tagName === 'IMG') {
      console.log(111)
      // 排他 干掉以前的 active  li 上面
      this.querySelector('.active').classList.remove('active')
      // 当前元素的爸爸添加 active
      e.target.parentNode.classList.add('active')
      // 拿到当前小图片的 src
      console.log(e.target.src)
      // 让中等盒子里面的图片，src 更换为   小图片src
      middle.querySelector('img').src = e.target.src
      // 大盒子更换背景图片
      large.style.backgroundImage = `url(${e.target.src})`
    }
  })


  // 3. 鼠标经过中等盒子， 显示隐藏 大盒子
  middle.addEventListener('mouseenter', show)
  middle.addEventListener('mouseleave', hide)
  let timeId = null
  // 显示函数 显示大盒子
  function show() {
    // 先清除定时器
    clearTimeout(timeId)
    large.style.display = 'block'
  }
  // 隐藏函数 隐藏大盒子
  function hide() {
    timeId = setTimeout(function () {
      large.style.display = 'none'
    }, 200)
  }


  // 4. 鼠标经过大盒子， 显示隐藏 大盒子
  large.addEventListener('mouseenter', show)
  large.addEventListener('mouseleave', hide)


  // 5. 鼠标经过中等盒子，显示隐藏 黑色遮罩层
  const layer = document.querySelector('.layer')
  middle.addEventListener('mouseenter', function () {
    layer.style.display = 'block'
  })
  middle.addEventListener('mouseleave', function () {
    layer.style.display = 'none'
  })
  // 6.移动黑色遮罩盒子
  middle.addEventListener('mousemove', function (e) {
    // let x = 10, y = 20
    // console.log(11)
    // 鼠标在middle 盒子里面的坐标 = 鼠标在页面中的坐标 - middle 中等盒子的坐标
    // console.log(e.pageX)鼠标在页面中的坐标
    // middle 中等盒子的坐标
    // console.log(middle.getBoundingClientRect().left)
    let x = e.pageX - middle.getBoundingClientRect().left
    let y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop
    // console.log(x, y)
    // 黑色遮罩移动 在 middle 盒子内 限定移动的距离
    if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {
      // 黑色盒子不是一直移动的
      // 声明2个变量 黑色盒子移动的 mx my变量 
      let mx = 0, my = 0
      if (x < 100) mx = 0
      if (x >= 100 && x <= 300) mx = x - 100
      if (x > 300) mx = 200

      if (y < 100) my = 0
      if (y >= 100 && y <= 300) my = y - 100
      if (y > 300) my = 200

      layer.style.left = mx + 'px'
      layer.style.top = my + 'px'
      // 大盒子的背景图片要跟随 中等盒子移动  存在的关系是 2倍   
      large.style.backgroundPositionX = -2 * mx + 'px'
      large.style.backgroundPositionY = -2 * my + 'px'
    }
  })
})

// sku规格被操作时
let skuObj = {}
const skuChange = (sku) => {
  console.log(sku)
  skuObj = sku
}

// count
const count = ref(1)
const countChange = (count) => {
  console.log(count)
}

// 添加购物车
const addCart = () => {
  if (skuObj.skuId) {
    console.log(skuObj, cartStore.addCart)
    // 规则已经选择  触发action
    cartStore.addCart({
      id: goods.value.id,
      name: goods.value.name,
      picture: goods.value.mainPictures[0],
      price: goods.value.price,
      count: count.value,
      skuId: skuObj.skuId,
      attrsText: skuObj.specsText,
      selected: true
    })
  } else {
    // 规格没有选择 提示用户
    ElMessage.warning('请选择规格')
  }
}

</script>

<template>
  <div>
    <div class="xtx-wrapper">
      <div class="container">
        <!-- 面包屑 -->
        <div class="xtx-bread">
          <a href="javascript:;"> 首页 > </a>
          <a href="javascript:;"> 产品 > </a>
          <a href="javascript:;"> {{ goods.type }} > </a>
          <span>{{ goods.productName }}</span>
        </div>
        <!-- 商品信息 -->
        <div class="xtx-product-info">
          <div class="left">
            <div class="pictrue">
              <div class="middle">
                <img :src='goods.image' alt="">
                <div class="layer"></div>
              </div>
              <div class="small">
                <ul>
                  <li class="active"><img :src='goods.image' alt=""></li>
                </ul>
              </div>
              <div class="large"></div>
            </div>
            <div class="other">
              <ul>
                <li>
                  <p>销量人气</p>
                  <p>1999+</p>
                  <p>销量人气</p>
                </li>
                <li>
                  <p>商品评价</p>
                  <p>999+</p>
                  <p>查看评价</p>
                </li>
                <li>
                  <p>收藏人气</p>
                  <p>299+</p>
                  <p><a href="javascript:;">收藏商品</a></p>
                </li>
                <li>
                  <p>品牌信息</p>
                  <p>{{ goods.type }}</p>
                  <p><a href="javascript:;">品牌主页</a></p>
                </li>
              </ul>
            </div>
          </div>
          <div class="right">
            <h3 class="name">{{ goods.productName }}</h3>
            <p class="desc">全面屏设计 / 高清分辨率 / 海量内容 / 1G+4G大内存 / 多核处理器</p>
            <p class="price"><span class="now">¥{{ goods.price }}</span><span class="old">¥{{ goods.price * 2 }}</span></p>
            <div class="address">
              <div class="item">
                <div class="dt">促销</div>
                <div class="dd">12月好物放送，App领券购买直降{{ goods.price / 2 }}元</div>
              </div>
              <div class="item">
                <div class="dt">配送</div>
                <div class="dd">至
                  <div class="box">
                    <span>陕西 西安 <i></i></span>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="dt">服务</div>
                <div class="dd">
                  <span class="fw">无忧退货</span>
                  <span class="fw">快速退款</span>
                  <span class="fw">免费包邮</span>
                  <a href="#" class="lj">了解详情</a>
                </div>
              </div>
            </div>
            <div class="attrs">
              <div class="item">
                <div class="dt">颜色</div>
                <div class="dd">
                  <img :src='goods.image' alt="">
                  <!-- <img src="./uploads/img/cate-07.png" alt=""> -->
                </div>
              </div>
              <div class="item">
                <div class="dt">服务</div>
                <div class="dd">
                  <span class="size">无忧退货</span>
                  <span class="size">快速退款</span>
                  <span class="size">免费包邮</span>
                  <!-- <span class="size">62英寸</span> -->
                </div>
              </div>
              <div class="item">
                <div class="dt">数量</div>
                <div class="dd">
                  <div class="num">
                    <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
                  </div>
                </div>
              </div>
              <div class="item">
                <a class="buy" href="javascript:;" style="margin-right: 20px;">立即购买</a>
                <a class="buy" href="javascript:;" @click="addCart1">加入购物车</a>
              </div>
            </div>
          </div>
        </div>
        <!-- 同类产品推荐 -->
        <div class="xtx-relevant-product">
          <h3>产品推荐</h3>
          <ul>
            <li>
              <a href="#">
                <img src="https://sziit-student.oss-cn-shenzhen.aliyuncs.com/imge3/s7.jpg" alt="">
                <p class="name">薯条</p>
                <p class="desc">云朵酱每日薯条空心酥脆土豆条番茄烤肉味休闲解馋零食</p>
                <p class="price">¥17.88</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://sziit-student.oss-cn-shenzhen.aliyuncs.com/imge3/s6.jpg" alt="">
                <p class="name">小米糕</p>
                <p class="desc">壹得利藜麦山药60包小米糕八珍糕芡实糕点心适合胃纯手工</p>
                <p class="price">¥6.09</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://sziit-student.oss-cn-shenzhen.aliyuncs.com/imge2/j6.jpg" alt="">
                <p class="name">烧水杯</p>
                <p class="desc">携式烧水壶旅行出差折叠保温一体电热水壶小型烧水杯</p>
                <p class="price">¥69.99</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="https://sziit-student.oss-cn-shenzhen.aliyuncs.com/imge2/j7.jpg" alt="">
                <p class="name">干燥机</p>
                <p class="desc">新款生态链品牌除湿机家用静音宿舍智能地下室干燥机</p>
                <p class="price">¥169.99</p>
              </a>
            </li>
          </ul>
          <a href="javascript:;" class="prev"><span class="iconfont icon-angle-left"></span></a>
          <a href="javascript:;" class="next"><span class="iconfont icon-angle-right"></span></a>
        </div>
        <!-- 商品详情 -->
        <div class="xtx-product-detail">
          <div class="main">
            <div class="cont">
              <div class="tab-head">
                <a href="javascript:;">商品详情</a>
                <a href="javascript:;">商品评价<span>（998+）</span></a>
              </div>
              <div class="tab-pane">
                <!-- 静态属性 -->
                <div class="attrs">
                  <div class="item"><span>商品名称：</span><span>小米L32M5-AZ </span></div>
                  <div class="item"><span>商品编号：</span><span>4620979 </span></div>
                  <div class="item"><span>商品毛重：</span><span>8.0kg </span></div>
                  <div class="item"><span>商品产地：</span><span>中国大陆 </span></div>
                  <div class="item"><span>屏幕尺寸：</span><span>32英寸及以下 </span></div>
                  <div class="item"><span>能效等级：</span><span>三级能效 </span></div>
                  <div class="item"><span>电视类型：</span><span>人工智能 </span></div>
                  <div class="item"><span>选购指数：</span><span>6.9-6.0 </span></div>
                  <div class="item"><span>观看距离：</span><span>2m以下（≤32英寸）</span></div>
                </div>
                <!-- 详情内容 -->
                <div class="detail">
                  <img src="https://yanxuan-item.nosdn.127.net/39d7f2407c90d0442566a719146ee9c1.jpg" alt=""
                    data-v-2c43c764=""><img
                    src="https://yanxuan-item.nosdn.127.net/7dfee58e7c6b3996badf368610ed62b1.jpg" alt=""
                    data-v-2c43c764=""><img
                    src="https://yanxuan-item.nosdn.127.net/d1acff1a29bddd21c2ad337d892a9f7c.jpg" alt=""
                    data-v-2c43c764=""><img
                    src="https://yanxuan-item.nosdn.127.net/ac722b04b2014ac337d8db695ee46f0c.jpg" alt=""
                    data-v-2c43c764=""><img
                    src="https://yanxuan-item.nosdn.127.net/c63e36faa0848ee37c825897f5cec179.jpg" alt=""
                    data-v-2c43c764=""><img
                    src="https://yanxuan-item.nosdn.127.net/e0f13dbf14c8a2f07e86bf3df3ca002b.jpg" alt=""
                    data-v-2c43c764="">
                </div>
              </div>
              <div class="tab-pane" style="display: none;">评价</div>
            </div>
            <!-- 注意事项 -->
            <div class="warn">
              <h3>注意事项</h3>
              <p class="tit">• 购买运费如何收取？ </p>
              <p>单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费) </p>
              <br>
              <br>
              <p class="tit">• 使用什么快递发货? </p>
              <p>默认使用顺丰快递发货(个别商品使用其他快递） </p>
              <p>配送范围覆盖全国大部分地区(港澳台地区除外）。 </p>
              <br>
              <br>
              <p class="tit">• 如何申请退货? </p>
              <p>1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账； </p>
              <p>2.内裤和食品等特殊商品无质量问题不支持退货； </p>
              <p>3.退货流程： 确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成； </p>
              <p>4.因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。</p>
            </div>
          </div>
          <div class="aside">
            <div class="tit">24小时热销榜</div>
            <div class="product">
              <img src="https://sziit-student.oss-cn-shenzhen.aliyuncs.com/imge2/j5.jpg" alt="">
              <p class="name">超声波洗眼镜机</p>
              <p class="desc">超声波眼镜清洗机洗机首饰清洁机神器家用眼睛盒</p>
              <p class="price">¥188.88</p>
            </div>
            <div class="product">
              <img src="https://sziit-student.oss-cn-shenzhen.aliyuncs.com/imge2/j10.jpg" alt="">
              <p class="name">移动小空调</p>
              <p class="desc">制冷小型冷风机学生宿舍便携式迷你</p>
              <p class="price">¥39.99</p>
            </div>
            <div class="product">
              <img src="https://sziit-student.oss-cn-shenzhen.aliyuncs.com/imge2/j7.jpg" alt="">
              <p class="name">烤箱</p>
              <p class="desc">家用新款迷你小烤箱烤炉电烤箱电器烘焙家电</p>
              <p class="price">¥45.55</p>
            </div>
            <div class="tit">专题推荐</div>
            <div class="special">
              <img src="https://sziit-student.oss-cn-shenzhen.aliyuncs.com/imge3/s1.jpg" alt="">
              <p class="name">蛋卷</p>
            </div>
            <div class="special">
              <img src="https://sziit-student.oss-cn-shenzhen.aliyuncs.com/imge3/s2.jpg" alt="">
              <p class="name">脆饼</p>
            </div>
            <div class="special">
              <img src="https://sziit-student.oss-cn-shenzhen.aliyuncs.com/imge3/s3.jpg" alt="">
              <p class="name">绿茶酥</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped lang='scss'>
.xtx-goods-page {
  .goods-info {
    min-height: 600px;
    background: #fff;
    display: flex;

    .media {
      width: 580px;
      height: 600px;
      padding: 30px 50px;
    }

    .spec {
      flex: 1;
      padding: 30px 30px 30px 0;
    }
  }

  .goods-footer {
    display: flex;
    margin-top: 20px;

    .goods-article {
      width: 940px;
      margin-right: 20px;
    }

    .goods-aside {
      width: 280px;
      min-height: 1000px;
    }
  }

  .goods-tabs {
    min-height: 600px;
    background: #fff;
  }

  .goods-warn {
    min-height: 600px;
    background: #fff;
    margin-top: 20px;
  }

  .number-box {
    display: flex;
    align-items: center;

    .label {
      width: 60px;
      color: #999;
      padding-left: 10px;
    }
  }

  .g-name {
    font-size: 22px;
  }

  .g-desc {
    color: #999;
    margin-top: 10px;
  }

  .g-price {
    margin-top: 10px;

    span {
      &::before {
        content: "¥";
        font-size: 14px;
      }

      &:first-child {
        color: $priceColor;
        margin-right: 10px;
        font-size: 22px;
      }

      &:last-child {
        color: #999;
        text-decoration: line-through;
        font-size: 16px;
      }
    }
  }

  .g-service {
    background: #f5f5f5;
    width: 500px;
    padding: 20px 10px 0 10px;
    margin-top: 10px;

    dl {
      padding-bottom: 20px;
      display: flex;
      align-items: center;

      dt {
        width: 50px;
        color: #999;
      }

      dd {
        color: #666;

        &:last-child {
          span {
            margin-right: 10px;

            &::before {
              content: "•";
              color: $xtxColor;
              margin-right: 2px;
            }
          }

          a {
            color: $xtxColor;
          }
        }
      }
    }
  }

  .goods-sales {
    display: flex;
    width: 400px;
    align-items: center;
    text-align: center;
    height: 140px;

    li {
      flex: 1;
      position: relative;

      ~li::after {
        position: absolute;
        top: 10px;
        left: 0;
        height: 60px;
        border-left: 1px solid #e4e4e4;
        content: "";
      }

      p {
        &:first-child {
          color: #999;
        }

        &:nth-child(2) {
          color: $priceColor;
          margin-top: 10px;
        }

        &:last-child {
          color: #666;
          margin-top: 10px;

          i {
            color: $xtxColor;
            font-size: 14px;
            margin-right: 2px;
          }

          &:hover {
            color: $xtxColor;
            cursor: pointer;
          }
        }
      }
    }
  }
}

.goods-tabs {
  min-height: 600px;
  background: #fff;

  nav {
    height: 70px;
    line-height: 70px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;

    a {
      padding: 0 40px;
      font-size: 18px;
      position: relative;

      >span {
        color: $priceColor;
        font-size: 16px;
        margin-left: 10px;
      }
    }
  }
}

.goods-detail {
  padding: 40px;

  .attrs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;

    li {
      display: flex;
      margin-bottom: 10px;
      width: 50%;

      .dt {
        width: 100px;
        color: #999;
      }

      .dd {
        flex: 1;
        color: #666;
      }
    }
  }

  >img {
    width: 100%;
  }
}

.btn {
  margin-top: 20px;

}

.bread-container {
  padding: 25px 0;
}

.xtx-wrapper {
  background: #f5f5f5;
  line-height: 1.4;
}

.xtx-wrapper .container {
  width: 1240px;
  margin: 0 auto;
  padding: 20px 0 40px;
}

.xtx-bread {
  padding: 10px 0 25px 25px;
}

.xtx-bread a {
  color: #999;
  padding-right: 5px;
}

.xtx-bread a:hover {
  color: #27BA9B;
}

.xtx-product-info {
  background: #fff;
  display: flex;
  min-height: 580px;
}

.xtx-product-info .left {
  width: 580px;
  padding: 30px 50px;
}

.xtx-product-info .left .pictrue {
  width: 480px;
  height: 400px;
  display: flex;
  position: relative;
}

.xtx-product-info .left .pictrue .middle {
  width: 400px;
  height: 400px;
  position: relative;
}

.xtx-product-info .left .pictrue .middle .layer {
  display: none;
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  left: 0;
  top: 0;
  cursor: move;
}

.xtx-product-info .left .pictrue .large {
  width: 400px;
  height: 400px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  position: absolute;
  left: 412px;
  top: 0;
  z-index: 999;
  background-color: #fff;
  display: none;
  background-image: url(../images/1.jpg);
  background-size: 800px 800px;
}

.xtx-product-info .left .pictrue .middle img {
  width: 100%;
  height: 100%;
}

.xtx-product-info .left .pictrue .small {
  width: 80px;
  height: 400px;
}

.xtx-product-info .left .pictrue .small ul li {
  width: 68px;
  height: 68px;
  margin-bottom: 15px;
  margin-left: 12px;
  border: 2px solid transparent;
}

.xtx-product-info .left .pictrue .small ul li img {
  width: 100%;
  height: 100%;
}

.xtx-product-info .left .pictrue .small ul li.active,
.xtx-product-info .left .pictrue .small ul li:hover {
  border-color: #27BA9B;
}

.xtx-product-info .left .other {
  margin-top: 20px;
}

.xtx-product-info .left .other ul {
  display: flex;
  width: 400px;
}

.xtx-product-info .left .other ul li {
  flex: 1;
  text-align: center;
  position: relative;
  line-height: 32px;
}

.xtx-product-info .left .other ul li::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 0;
  height: 70px;
  border-right: 1px solid #e4e4e4;
}

.xtx-product-info .left .other ul li:last-child::before {
  display: none;
}

.xtx-product-info .left .other ul li p:first-child {
  color: #999;
}

.xtx-product-info .left .other ul li p:nth-child(2) {
  color: #CF4444;
}

.xtx-product-info .right {
  width: 660px;
  padding-top: 30px;
}

.xtx-product-info .right h3 {
  font-size: 22px;
  font-weight: normal;
}

.xtx-product-info .right .desc {
  padding-top: 10px;
  color: #999;
}

.xtx-product-info .right .price {
  padding: 10px 0;
}

.xtx-product-info .right .price .now {
  color: #CF4444;
  margin-right: 5px;
  font-size: 22px;
}

.xtx-product-info .right .price .old {
  color: #999;
  text-decoration: line-through;
  font-size: 18px;
}

.xtx-product-info .right .address {
  width: 510px;
  background: #f9f9f9;
  padding: 0 10px 20px;
}

.xtx-product-info .right .address .fw {
  position: relative;
  padding: 0 15px 0 10px;
}

.xtx-product-info .right .address .fw::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #27BA9B;
}

.xtx-product-info .right .address .lj {
  color: #27BA9B;
}

.xtx-product-info .right .address .box {
  width: 150px;
  height: 28px;
  border: 1px solid #e4e4e4;
  display: inline-block;
  line-height: 26px;
  text-align: center;
  margin-left: 10px;
  background: #fff;
}

.xtx-product-info .right .attrs {
  padding: 0 10px;
}

.xtx-product-info .right .attrs img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border: 1px dashed transparent;
  cursor: pointer;
}

.xtx-product-info .right .attrs img.active,
.xtx-product-info .right .attrs img:hover {
  border-color: #27BA9B;
}

.xtx-product-info .right .attrs .size {
  border: 1px solid #e4e4e4;
  padding: 5px 25px;
  display: inline-block;
  margin-right: 6px;
  cursor: pointer;
}

.xtx-product-info .right .attrs .size.active,
.xtx-product-info .right .attrs .size:hover {
  border-color: #27BA9B;
}

.xtx-product-info .right .attrs .num {
  width: 116px;
  height: 28px;
  border: 1px solid #e4e4e4;
  display: flex;
}

.xtx-product-info .right .attrs .num input {
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
  width: 60px;
  line-height: 26px;
  text-align: center;
  color: #979797;
}

.xtx-product-info .right .attrs .num a {
  width: 28px;
  text-align: center;
  line-height: 26px;
  color: #979797;
}

.xtx-product-info .right .item {
  color: #999;
  display: flex;
  padding-top: 20px;
  align-items: center;
}

.xtx-product-info .right .item .dt {
  width: 50px;
}

.xtx-product-info .right .item .dd {
  flex: 1;
  color: #666;
}

.xtx-product-info .right .buy {
  width: 220px;
  height: 50px;
  background: #27BA9B;
  border-radius: 4px;
  display: block;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 50px;
}

.xtx-relevant-product {
  background: #fff;
  margin: 20px 0;
  padding: 30px 28px;
  position: relative;
}

.xtx-relevant-product h3 {
  font-weight: normal;
  font-size: 20px;
  padding-bottom: 8px;
  padding-left: 25px;
}

.xtx-relevant-product .prev,
.xtx-relevant-product .next {
  position: absolute;
  top: 200px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #dbdbdb;
}

.xtx-relevant-product .prev span,
.xtx-relevant-product .next span {
  font-size: 30px;
}

.xtx-relevant-product .prev {
  left: 0;
}

.xtx-relevant-product .next {
  right: 0;
}

.xtx-relevant-product ul {
  display: flex;
  justify-content: space-between;
}

.xtx-relevant-product ul li {
  width: 278px;
  height: 360px;
  text-align: center;
}

.xtx-relevant-product ul li img {
  width: 190px;
  height: 190px;
  margin-top: 25px;
}

.xtx-relevant-product ul li .name {
  font-size: 16px;
  line-height: 40px;
}

.xtx-relevant-product ul li .desc {
  color: #999;
  line-height: 50px;
}

.xtx-relevant-product ul li .price {
  color: #CF4444;
  font-size: 18px;
  line-height: 50px;
}

.xtx-product-detail {
  display: flex;
  justify-content: space-between;
}

.xtx-product-detail .main {
  width: 942px;
}

.xtx-product-detail .main .cont {
  background: #fff;
}

.xtx-product-detail .main .cont .tab-head {
  height: 70px;
  line-height: 70px;
  border-bottom: 1px solid #f5f5f5;
  font-size: 18px;
  padding: 0 20px;
  position: relative;
}

.xtx-product-detail .main .cont .tab-head a {
  margin-right: 80px;
}

.xtx-product-detail .main .cont .tab-head a span {
  color: #CF4444;
}

.xtx-product-detail .main .cont .tab-head::before {
  content: "";
  position: absolute;
  height: 70px;
  width: 1px;
  background: #f5f5f5;
  top: 0;
  left: 135px;
}

.xtx-product-detail .main .cont .tab-pane .attrs {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
}

.xtx-product-detail .main .cont .tab-pane .attrs .item {
  width: 25%;
  display: flex;
  padding-bottom: 10px;
}

.xtx-product-detail .main .cont .tab-pane .attrs .item span:first-child {
  width: 75px;
  color: #999;
}

.xtx-product-detail .main .cont .tab-pane .attrs .item span:last-child {
  flex: 1;
  color: #666;
}

.xtx-product-detail .main .cont .tab-pane .detail {
  padding: 25px;
  text-align: center;
}

.xtx-product-detail .main .warn {
  margin-top: 20px;
  background: #fff;
  padding-bottom: 40px;
}

.xtx-product-detail .main .warn h3 {
  height: 80px;
  line-height: 80px;
  border-bottom: 1px solid #f5f5f5;
  padding-left: 50px;
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 10px;
}

.xtx-product-detail .main .warn p {
  line-height: 40px;
  padding-left: 25px;
  color: #666;
}

.xtx-product-detail .main .warn p.tit {
  color: #333;
}

.xtx-product-detail .aside {
  width: 278px;
}

.xtx-product-detail .aside .tit {
  width: 278px;
  height: 70px;
  background: #E26237;
  color: #fff;
  font-size: 18px;
  line-height: 70px;
  padding-left: 25px;
  margin-bottom: 10px;
}

.xtx-product-detail .aside .product {
  margin-bottom: 10px;
  background: #fff;
  width: 278px;
  height: 360px;
  text-align: center;
}

.xtx-product-detail .aside .product img {
  width: 190px;
  height: 190px;
  margin-top: 25px;
}

.xtx-product-detail .aside .product .name {
  font-size: 16px;
  line-height: 40px;
}

.xtx-product-detail .aside .product .desc {
  color: #999;
  line-height: 50px;
}

.xtx-product-detail .aside .product .price {
  color: #CF4444;
  font-size: 18px;
  line-height: 50px;
}

.xtx-product-detail .aside .special {
  background: #fff;
  text-align: center;
  margin-bottom: 10px;
}

.xtx-product-detail .aside .special img {
  width: 190px;
  height: 190px;
  margin-top: 25px;
}

.xtx-product-detail .aside .special .name {
  font-size: 18px;
  padding: 24px 0;
}

a>.desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block;
}

.product>.desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block;
}
</style>